<template>
  <div class="body">
    <!-- 头部 -->
    <div class="head">
      <div class="head-left">
        <Icon icon="ic:baseline-notes" color="#999" :size="24" />
        <p>指标管理--评价进度</p>
      </div>
      <div class="head-right">
        <Icon icon="typcn:export" color="#54b46b" :size="30" />
        <p>信息导出</p>
      </div>
    </div>
    <!-- 搜索框 -->
    <ElForm>
      <ElFormItem label="学期" label-position="left">
        <ElSelect v-model="value" style="width: 30%">
          <ElOption
            v-for="item in data"
            :key="item.semester_id"
            :label="item.semester_name"
            :value="item.semester_id"
          />
        </ElSelect>
        <ElButton
          type="primary"
          style="margin-left: 30px; width: 80px; background-color: #2c8e79; border: none"
        >
          查询</ElButton
        >
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { semesterApi } from '@/api/semester'
import { ElFormItem, ElOption, ElSelect, ElForm, ElButton } from 'element-plus'
import { ref } from 'vue'
const data = (await semesterApi()).data
const value = ref(data[0].semester_name)
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;

  padding-top: 10px;
  .head-left {
    display: flex;
    p {
      margin-left: 10px;
      color: #797979;
    }
  }
  .head-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin-top: 5px;
      font-size: 10px;
      border: #efefef 1px solid;
      padding: 0 10px;
      border-radius: 5px;
    }
  }
}
.body {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 25px 10px;
}
</style>
